import React from "react";
import { Text, View, TextInput, TouchableOpacity } from "react-native";
import BaseComponent from "../common/BaseComponent";
import SizeUtils from "../../common/SizeUtils";
import TImage from "../../components/TImage";

export default class SportSettingView extends BaseComponent {
  constructor(props) {
    super(props);

    this.state = {
      height: "",
      weight: "",
      age: ""
    };
  }

  componentDidMount() {}

  componentWillUnmount() {}

  render() {
    return (
      <View
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          bottom: 0,
          right: 0,
          backgroundColor: "#00000022"
        }}
      >
        <View
          style={{
            marginHorizontal: SizeUtils.translateDesignWidthToCode(28),
            height: SizeUtils.translateDesignHeightToCode(556),
            backgroundColor: "#ffffff",
            borderRadius: SizeUtils.translateDesignWidthToCode(10),
            marginTop: SizeUtils.translateDesignHeightToCode(350)
          }}
        >
          {this._renderTitle()}
          {this._renderInputBox("身高", "请输入您的身高", "cm", this.onHeightChange)}
          {this._renderInputBox("体重", "请输入您的体重", "kg", this.onWeightChange)}
          {this._renderInputBox("年龄", "请输入您的年龄", "岁", this.onAgeChange)}
          <View style={{ flex: 1 }} />
          {this._renderbutton()}
        </View>
      </View>
    );
  }

  _renderbutton() {
    return (
      <TouchableOpacity
        style={{
          height: SizeUtils.translateDesignHeightToCode(80),
          marginHorizontal: SizeUtils.translateDesignWidthToCode(20),
          borderRadius: SizeUtils.translateDesignHeightToCode(40),
          backgroundColor: "#EE3535",
          alignItems: "center",
          justifyContent: "center",
          marginBottom: SizeUtils.translateDesignHeightToCode(40)
        }}
        onPress={this.onConfirmInfoPress}
      >
        <Text
          style={{
            color: "#ffffff",
            fontSize: SizeUtils.translateFontSizeToCode(30)
          }}
        >
          确认设置
        </Text>
      </TouchableOpacity>
    );
  }

  onHeightChange = height => {
    this.setState({ height });
  };

  onWeightChange = weight => {
    this.setState({ weight });
  };

  onAgeChange = age => {
    this.setState({ age });
  };

  _renderInputBox(title, placeholder, unit, onChange) {
    return (
      <View
        style={{
          height: SizeUtils.translateDesignHeightToCode(84),
          marginHorizontal: SizeUtils.translateDesignWidthToCode(20),
          marginTop: SizeUtils.translateDesignHeightToCode(20),
          borderWidth: SizeUtils.translateDesignNumToCode(3),
          borderColor: "#E8E8E8",
          borderRadius: SizeUtils.translateDesignWidthToCode(4),
          flexDirection: "row",
          alignItems: "center",
          paddingLeft: SizeUtils.translateDesignWidthToCode(20),
          paddingRight: SizeUtils.translateDesignWidthToCode(34)
        }}
      >
        <Text
          style={{
            color: "#000000",
            fontSize: SizeUtils.translateFontSizeToCode(24),
            marginRight: SizeUtils.translateDesignWidthToCode(20)
          }}
        >
          {title}
        </Text>
        <TextInput
          style={{
            flex: 1,
            color: "#000000",
            fontSize: SizeUtils.translateFontSizeToCode(24)
          }}
          placeholder={placeholder}
          underlineColorAndroid="transparent"
          placeholderTextColor="#8F8F8F"
          onChangeText={onChange}
          keyboardType="numeric"
        />
        <Text
          style={{
            color: "#000000",
            fontSize: SizeUtils.translateFontSizeToCode(24)
          }}
        >
          {unit}
        </Text>
      </View>
    );
  }

  _renderTitle() {
    return (
      <View
        style={{
          height: SizeUtils.translateDesignHeightToCode(100),
          alignItems: "center",
          justifyContent: "center"
        }}
      >
        <Text
          style={{
            color: "#000000",
            fontSize: SizeUtils.translateFontSizeToCode(30)
          }}
        >
          完善个人信息,数据更精准
        </Text>
        <TouchableOpacity
          style={{
            position: "absolute",
            right: SizeUtils.translateDesignWidthToCode(20),
            top: SizeUtils.translateDesignHeightToCode(26),
            width: SizeUtils.translateDesignWidthToCode(50),
            height: SizeUtils.translateDesignWidthToCode(50),
            alignItems: "center",
            justifyContent: "center"
          }}
          onPress={this.onClosePress}
        >
          <TImage
            source={require("../../../resource/images/common/cha.png")}
            style={{ width: 25, height: 25 }}
          />
        </TouchableOpacity>
      </View>
    );
  }

  onClosePress = () => {
    this.props.closeSportInfo();
  };
  onConfirmInfoPress = () => {
    const { height, weight, age } = this.state;
    // console.log("onConfirmInfoPress-", height, weight, age);
    if(height==''||weight==''||age==''){
      ToastUtils.show('个人信息不完整,请填写完整')
      return
    }
    this.props.confirmSportInfo({ height, weight, age });
  };
}
